<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div th:fragment="centerPage">
		<div class="content" style="bottom: 2rem;">
			<div class="list-block media-list" style="margin-top: 2.2rem; margin-bottom:0; padding: 0; height: 5.5rem;">
				<ul>
					<li>
						<div class="item-content">
							<div class="item-media" @click="changeHeader">
								<img :src="agent.headUrl" style='width: 4rem;height: 4rem;'>
							</div>
							<div class="item-inner">
								<div class="item-title-row">
									<div class="item-title">{{agent.name}}{{!agent.auditStatus ? ('（'+ agent.auditStatus_fmt+'）') : ''}}</div>
									<div class="item-after" @click="showQrCode">
										<span class="icon icon-code"></span>
									</div>
								</div>
								<div class="item-subtitle">{{agent.level_fmt}}</div>
								<div class="item-text">{{agent.signature}}</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="list-block contacts-block" style="margin: 0;">
				<div class="list-group" v-for="func in functions">
					<ul>
						<li class="list-group-title alert-warning-important">{{func.name}}</li>
						<li class="item-content item-link" v-for="menu in func.menus" @click="gotopage(menu)">
							<div class="item-media"><i class="icon icon-app"></i></div>
							<div class="item-inner">
								<div class="item-title">{{menu.name}}</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="content-block">
			    <p><a href="javascript:void(0);" class="button button-big button-danger" @click="logout">退&nbsp;&nbsp;&nbsp;&nbsp;出</a></p>
			</div>
		</div>
		<div id="qrCodeDiv" v-show="false">
			<div class="card-header color-white no-border no-padding">
				<img class="card-cover" alt="" src="">
			</div>
		</div>
	</div>
	
	<div th:fragment="headerPopup" class="popup popup-header">
		<div class="content-block">
			<div class="clearfix">
				<p style="float: left;">更换您的头像</p>
		    	<p style="float: right;"><a href="#" class="close-popup" @click="closePopup">关闭</a></p>
			</div>
	    	<div class="list-block" style="margin: 0;">
    			<ul>
    				<li>
				    	<div class="item-content">
				        	<div class="item-inner">
				            	<div class="item-input">
				            		<input type="text" placeholder="请输入网络图片地址……" v-model="headUrl" @change="loadImage">
				            	</div>
				        	</div>
				        </div>
	        		</li>
	        	</ul>
	        </div>
	        <div class="card demo-card-header-pic">
    			<div class="card-header color-white no-border no-padding">
      				<img class='card-cover' :src="headImgUrl" alt="">
		    	</div>
		  	</div>
		  	<p><a href="#" class="button button-big close-popup" @click="postHeader">保&nbsp;&nbsp;&nbsp;&nbsp;存</a></p>
		</div>
	</div>
</body>
</html>